<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="container" style="height: 500px">
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
  var myChart = echarts.init(dom);
  //这里为等待loading效果显示
  myChart.showLoading({
    text: '数据正在加载...',
    textStyle: {fontSize: 30, color: '#444'},
    effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
  });
  
  chartOptin();//构建
  function chartOptin() {
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: "none"
          },
          dataView: {
            readOnly: false
          },
          magicType: {
            type: ["line", "bar"]
          },
          restore: {},
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
           data: ['1', '2', '3', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '描述',
          type: 'bar',
          barWidth: '60px',
          data: [120, 200, 150, 80, 70, 110, 130],
        }
      ]
    };
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
    //隐藏loading登陆效果
    myChart.hideLoading();
  };
</script>
</body>
</html>